<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>出库申请查看(不通过)</title>
		<link rel="stylesheet" href="../css/index.css" />
		<script src="../js/vue.min.js"></script>
		<script src="../js/elementui.js"></script>
		<script src="../js/axios.min.js"></script>
		<script src="../js/mycommon.js"></script>
		<style>
			.page {
				position: fixed;
				bottom: 0;
				height: 35%;
				width: 95%;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<header></header>
		<section id="app">
			<fieldset style="border: 1px solid gainsboro;margin-bottom: 4px;">
				<legend><i class="el-icon-search" style="color:#bfb6a3 ;">查询</i></legend>
				<el-form size="mini" :inline="true">
					<el-form-item label="物资名称">
						<el-input v-model="materialname" placeholder="请输入物资"></el-input>
					</el-form-item>
					<el-form-item label="物资编码">
						<el-input v-model="codematerial" placeholder="请输入编码"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="indexes">查 询</el-button>
					</el-form-item>
				</el-form>
			</fieldset>
			<!-- 表格 -->
			<el-table :data="list" border style="width: 100%">
				<el-table-column align="center" prop="codematerial" label="物资编码" min-width="6%">
				</el-table-column>
				<el-table-column align="center" prop="materialname" label="物资" min-width="20%">
				</el-table-column>
				<el-table-column align="center" prop="content" label="数量" min-width="10%">
				</el-table-column>
				<el-table-column align="center" prop="applicants" label="申请人" min-width="10%">
				</el-table-column>
				<el-table-column align="center" prop="applicationtime" :formatter="formatDate" label="申请时间"
					min-width="20%">
				</el-table-column>
				<el-table-column align="center" prop="reviewers" label="审核人" min-width="10%">
				</el-table-column>
				<el-table-column align="center" prop="state" label="状态" min-width="10%">
				</el-table-column>
				<el-table-column align="center" label="操作" min-width="10%">
					<template slot-scope="scope">
						<el-button type="primary" size="small"
							@click="handleEdit(scope.$index, scope.row)">查看</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!--查看入库申请详情-->
			<el-dialog title="出库申请详情" :visible.sync="dialogVisible" width="50%">
				<el-form ref="form1" v-for="ons in one" label-width="100px" size="big">
					<el-form-item label="物资编码" prop="codematerial">
						<el-input readonly="true" v-model="ons.codematerial" min-width="20%"></el-input>
					</el-form-item>
					<el-form-item label="物资名称" prop="materialname">
						<el-input readonly="true" v-model="ons.materialname"></el-input>
					</el-form-item>
					<el-form-item label="所属仓库" prop="warehouse">
						<el-input readonly="true" v-model="ons.warehouse"></el-input>
					</el-form-item>
					<el-form-item label="所属区域" prop="area">
						<el-input readonly="true" v-model="ons.area"></el-input>
					</el-form-item>
					<el-form-item label="所属货架" prop="shelves">
						<el-input readonly="true" v-model="ons.shelves"></el-input>
					</el-form-item>
					<el-form-item label="申请数量" prop="content">
						<el-input readonly="true" v-model="ons.content"></el-input>
					</el-form-item>
					<el-form-item label="备注" prop="remarks">
						<el-input readonly="true" v-model="ons.remarks"></el-input>
					</el-form-item>
				</el-form>
				<el-form label-width="100px" size="big">
					<el-form-item label="申请人" prop="applicants">
						<el-input readonly="true" v-model="one[0].applicants"></el-input>
					</el-form-item>
					<el-form-item label="申请时间" prop="applicationtime">
						<el-input readonly="true" v-model="format(one)"></el-input>
					</el-form-item>
					<el-form-item label="审核人" prop="reviewers">
						<el-input readonly="true" v-model="one[0].reviewers"></el-input>
					</el-form-item>
					<el-form-item label="状态" prop="state">
						<el-input readonly="true" v-model="one[0].state"></el-input>
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button size="mini" @click="dialogVisible = false">确 定</el-button>
				</span>
			</el-dialog>
			<!-- 分页 -->
			<div class="page">
				<el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize"
					@current-change="change">
				</el-pagination>
			</div>

		</section>
		<footer></footer>
		<script>
			new Vue({
				el: '#app',
				data: {
					list: [{
						id: 0, //出库申请id
						codematerial: '', //物资编码
						materialname: '', //物资名称
						warehouseid: '', //仓库id
						warehouse: '', //仓库名称
						areaid: '', //区域id
						area: '', //区域名称
						shelvesid: '', //货架id
						shelves: '', //货架名称
						applicants: '', //申请人
						applicantsrole: '', //申请人角色
						reviewers: '', //审核人
						reviewersrole: '', //审核人角色
						content: '', //申请数量
						applicationtime: '', //申请时间
						state: '', //状态
						batchid: '', //批量申请的唯一值
						remarks: '' //备注
					}],
					one: [{
						id: 0, //出库申请id
						codematerial: '', //物资编码
						materialname: '', //物资名称
						warehouseid: '', //仓库id
						warehouse: '', //仓库名称
						areaid: '', //区域id
						area: '', //区域名称
						shelvesid: '', //货架id
						shelves: '', //货架名称
						applicants: '', //申请人
						applicantsrole: '', //申请人角色
						reviewers: '', //审核人
						reviewersrole: '', //审核人角色
						content: '', //申请数量
						applicationtime: '', //申请时间
						state: '', //状态
						batchid: '', //批量申请的唯一值
						remarks: '' //备注
					}],
					page: 1, //当前页
					pageSize: 5, //分页大小
					total: 0, //查询的总数
					dialogVisible: false, //订单详情表单显示与否
					materialname: '',
					codematerial: '',
					status: ''
				},
				methods: {
					//查询订单
					indexes() {
						var that = this;
						//ajax请求
						axios.post(HTTP + "der/selectDer", {
							page: this.page, //设置当前页
							pageSize: this.pageSize, //设置分页大小
							materialname: this.materialname,
							codematerial: this.codematerial,
							status: 0
						}).then(function(res) {
							//alert(JSON.stringify(res.data.data.list))
							that.total = res.data.data.list.total
							that.list = res.data.data.list.list
						}).catch(err => {
							console.log(err)
						});
					},
					//查询具体信息
					handleEdit(index, row) {
						var that = this
						axios.post(HTTP + "der/selectOneDer", {
							batchid: row.batchid
						}).then(function(res) {
							that.one = res.data.data.one
							that.dialogVisible = true
							//alert(JSON.stringify(res))
						}).catch(err => {
							console.log(err)
						});
					},
					//改变页码
					change(val) {
						this.page = val
						this.indexes()
					},
					//格式化时间
					formatDate(row, column) {
						// 获取单元格数据
						let data = row[column.property]
						if (data == null) {
							return ''
						}
						return datetimeFormat(data)
					},
					format(value) {
						return datetimeFormat(value[0].applicationtime)
					}
				},
				//初始化
				mounted() {
					this.indexes()
				}
			})
		</script>
	</body>
</html>